<template>
	<view>
		<!--选择地址-->
		<view class="address" @click="chooseAddress">
			<view class="address1">
				<text class="icon">&#xe8ae;</text>
			</view>
			<view class="address2">
				<text>选择地址</text>
			</view>
			<view class="address3">
				<text class="icon">&#xe65b;</text>
			</view>
		</view>
		<!--收货地址详情-->
		<view class="addressDetail">
			<view class="name">
				<text class="icon">&#xe773; 姓名: {{userAddress.name}}</text>
			</view>
			<view class="tel">
				<text class="icon">&#xe773; 电话: {{userAddress.tel}}</text>
			</view>
			<view class="address">
				<text class="icon">&#xe773; 地址: {{userAddress.address}}</text>
			</view>
		</view>

		<!--商品-->
		<view class="product">
			<view class="left">
				<view>
					<image :src="img"></image>
				</view>
			</view>
			<view class="right">
				<view class="proname">
					<text>{{product.proName}}</text>
				</view>
				<view class="proprice">
					<text>价格 : ¥{{product.price}}</text>
				</view>
				<view class="pronumber">
					<text>数量 : {{number}}</text>
				</view>
			</view>
		</view>
		<!--合计-->
		<view class="total">
			<view class="totalleft">
				<text>商品金额</text>
			</view>
			<view class="totalright">
				<text>¥ {{product.price*number}}</text>
			</view>
		</view>

		<!--确认下单-->
		<view class="payorder" @click="fukuan">
			<text>确认下单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: null,
				number: 0,
				product: {
					proName: null,
				},
				img: null,
				//用户地址
				userAddress: {
					name: null,
					tel: null,
					address: null
				},
				//用户信息
				user: {

				}
			}
		},
		onLoad(option) {
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value = uni.getStorageSync("user");
			this.user = value;
			this.productId = option.proId;
			this.number = option.number;

			uni.request({
				url: this.webUrl + 'selectProductByProId',
				data: {
					'proId': option.proId,
					'categoryId': option.categoryId
				},
				success: (res) => {
					this.product = res.data.obj;
					this.img = this.product.img[0].url;
				},
				fail: (err) => (
					uni.showToast({
						title: '获取数据失败'
					})
				)
			})
			uni.request({
				url: this.webUrl + "selectUserMorenAddress",
				data: {
					'userId': this.user.userId
				},
				success: (res) => {
					this.userAddress = res.data.obj;
				}
			})
		},
		methods: {
			//跳转地址管理
			chooseAddress() {
				uni.navigateTo({
					url: "/pages/liu/chooseAddress/chooseAddress?userId=" + this.user.userId
				})
			},
			//付款
			fukuan() {
				console.log("id为:"+this.productId);
				console.log("数量为:"+this.number);
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定下单付款?',
					success: function(res) {
						if (res.confirm) {
							//定义一个主键id
							var proOrderId = 0;
							uni.request({
								url: _this.webUrl + 'addNewProductOrder',
								data: {
									total: _this.product.price * _this.number,
									userId: _this.user.userId,
									address: _this.userAddress.address,
									name: _this.userAddress.name,
									tel: _this.userAddress.tel
								},
								method: 'POST',
								header: {
									"content-type": "application/x-www-form-urlencoded;charset=UTF-8"
								},
								success: (res) => {
									proOrderId = res.data.obj;
									console.log(proOrderId);
								}
							})
							setTimeout(function() {
								uni.request({
									url: _this.webUrl + "addProductOrderDetail",
									data: {
										productOrderId: proOrderId,
										proId: _this.product.proId,
										categoryId: _this.product.categoryId,
										proname: _this.product.proName,
										price: _this.product.price,
										number: _this.number,
										url: _this.product.img[0].url
									},
									success: (res) => {
										//支付支付
										const jyAliPay = uni.requireNativePlugin('JY-ALIPAY')
										jyAliPay.show({ // 发起支付
											if_sanbox: true,
											auto_create_order_info: true,
											appid: '2016102100732354',
											rsa2_private: "MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCmAl8QTWuGki+mmA/4m/PWVO4JwhkB93nsGZnzNioqg6CiStDucAUom1jfWkntAnzvJ3xuC/Ggu6ldM3CDxl0IC1/2/UKB7fpQaf8QIYbncjhZsYlORg8t8QPMH84xtyXHt9Fdcu48xb8XpztSKtrVlWbgYmSgkeMUy5GydG0F3iCfecB1yt7x0TwF7ldzBfpeWMLnzD5KBk+uQiK9ch9YZ9ROJ6pdMEHB/tTExKcK+N1+xvMSoSLnv1kip320itgVOSdwsbVRXl3sAo48lv8cy4/Vq7CKhGKE8yKzu1F/gVpzSYq68RJU3Lnrzr0Nl8mWMEzzunO0SrJVXoeixorRAgMBAAECggEAFeX4LklYJr8/4+TpLm08BAjeAZGGBPllLtzNrwR1GXiVhvMBjoJeW9XqKkRZvhb27gEya73NmNtIYw/3BprzCK2fchBEZqlCvLrOt40Eo6Ewh7xglV+ufuvtCU8kvvAe3rKDvqT7gi6/n1oi/BrFFSmJEY5JIdk8sDCOPpEXFI/bCV8tQiyBfSSEWPkZFeicwbZLpI517yMudf8gNe/7KTW70fzOjqcsBWOT8cvNhefmt4/TkQb3hE+OyVNuZhmPj4jFqi47PKzQqX2N6Bb+RFCNy2S26rNGLWYlYs3rmubNDI9+Haqki3IHt7Zn04cK8/zYtUaakWKVyMpH+l3VNQKBgQDeNHf1jRKgoMM/lxN6e9U8/lgJgFkU+8tTZZiJ28jsyVoZvipiiKIW/4m/486By7xTmT8e6K8bnjhq0DZ5ampZFXK+vucJrOITc17cvTct/lcuwbJ3PnNeplKeWvE0bvMMcbHws9Js5xPHS4Ty7LxJYCg4/9XzA+VeaG/1fJpRzwKBgQC/Qe2bm4bjruV9xBEFzQ+N1lzHakoiLk4CM3jg5a67bA4GJEy+kBHVdYGgm+mjuwijnbvapz/sPidWxMxouCsMVjQ8XbH9rAFrLxruXJy4He1IpjbtVCy01/RizB8AG+KsEwwqgKB9oIYT8qMOJnVDpxGA8+IjaPdIZSgdZcGhXwKBgFNgXq69m4K4L+sZdg6cjpvPWBtglIyCGn4VfhIkbRUkTHGiYGcOm7uDcR2WjjM3zleUBhJD/wie6s5xiC8w1ezNVnvqR+jifQYNYUf0m9LfP7lkpuGFhma6g/+1YhJpmztNIhaOcuO4JTy/woggeloSAaW5oX8JNDSjfXcgpQsTAoGBAKhIGgkQj19GRCaknVW9WDI0qu3LV+87Tugg4fsAHP5L1QsSZXRGz2pCOgxXIvwtVSyhXOjGwDfdeD+gaTq60SXJs6xpxHKvJZBpogiY9EwMCPwjQ7EOn0d/vEgx0hUGdCtzlwDOrGfdFhv3IgERVZxxI7WS4SbG9M1+NA2puvWBAoGAVu/fQJLGG/f85gOrTdkXx8rVvYuOBFGrvnlnDL8RryKesNrP1Q6dAfiippCgR6OPtNR8xxZwUNFYB0XgIYgNE0EQ4Wyt9s/YAl50jMnO3gicF1qvfPeCa5X6htI/2v/b3rnvbAwdVgNfeHidUTfdocGoCSxq1NobjhmvJwzxuBw=",
											order_info: 'http://openapi.alipaydev.com/gateway.do?charset=UTF-8&biz_content={"out_trade_no":"202006091742176318992","total_amount":"88.88","subject":"iPhone+Xs+Max+256G","buyer_id":"2088102175953034","goods_detail":[],"seller_id":"2088102175107499"}&method=alipay.trade.create&sign=Jjld5wh2dPfeM1wd+P5OujWFJOaz9xiFp8q4A4thUIA6GLpd5TKDHiHcg9iUmxlypNueipXbzsN5J3fvRLVdrwGtBjgKtqb2tUasBxiiWbuvydtcDYpwi7K4b+Cs7PHwutCQ0Ao6Tk0TNUtiBDTY/3ZxDjWOklHVJFDAz64ypVp8VSpjId4YW2irYDPgo2c4UUmFF3lKTXfp2EZX6E7kAujmpwvYjjMzAAr9Hi87tplMTpzfnkMHjRNZCXnyH+V8AKrOxu7k/UQC41O2Z34e9MF3aV2ymX+BFLBJbC3Eu42bK0Ej+RBPra9BimMioLebp3G+qmDUa3CgjiTTmgk7HA==&app_id=2016091100484533&sign_type=RSA2&version=1.0&timestamp=2020-06-09+17:42:17'
										}, function(result) { // 支付完成回调
											console.log(result)
											if (result.resultStatus == '5002555') {
												console.log('支付sdk出错')
											} else if (result.resultStatus == '9000') {
												//更改订单状态为2
												uni.request({
													url:_this.webUrl+"updateProductOrderStatusTwo",
													data:{
														proOrderId:proOrderId
													},
													success: (res) => {
														//减库存
														uni.request({
															url:_this.webUrl+"updateProductStock",
															data:{
																proId:_this.productId,
																number:_this.number
															}
														})
													}
												})
												setTimeout(function(){
													uni.showToast({
														title:"支付成功,等待商家发货"
													})
													uni.navigateTo({
														url:"/pages/liu/productOrderList/productOrderList"
													})
												},3000)
											} else {
												console.log(result.memo);
												uni.showToast({
													title:"意外,支付失败"
												})
											}
										});
									}
								})
							}, 1000);
						} else if (res.cancel) {

						}
					}
				});
			}
		},
		//获取更改地址后的信息,
		//key对应的value此时是存入的选择的地址所有信息
		onShow() {
			uni.getStorage({
				key: "xuanzeid",
				success: (res) => {
					if (res.data != null) {
						setTimeout(function() {
							uni.showToast({
								title: "收货地址已更改"
							})
						}, 300)
					}
					this.userAddress = res.data;
				}
			})
			//销毁此key的缓存
			uni.removeStorage({
				key: "xuanzeid"
			})

		}

	}
</script>

<style lang="scss">
	page {
		background-color: rgb(220, 220, 220);
	}

	.product {
		float: left;
		width: 100%;
		height: 220rpx;
		background-color: white;

		.left {
			float: left;
			width: 220rpx;
			height: 220rpx;
			text-align: center;
			line-height: 220rpx;

			view {
				float: left;
				margin-top: 16rpx;
				margin-left: 16rpx;
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid rgb(220, 220, 220);

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right {
			float: left;
			width: 530rpx;
			height: 220rpx;

			.proname {
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;

				text {
					color: rgb(148, 102, 102);
					font-size: 28rpx;
				}
			}

			.proprice {
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;

				text {
					font-size: 30rpx;
					color: rgb(148, 102, 102);
				}
			}

			.pronumber {
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;

				text {
					font-size: 30rpx;
					color: rgb(148, 102, 102);
				}
			}
		}
	}

	.total {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		float: left;
		margin-top: 10rpx;
		width: 100%;
		height: 100rpx;
		background-color: white;

		.totalleft {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			color: rgb(148, 102, 102);
		}

		.totalright {
			height: 100rpx;
			line-height: 100rpx;
			margin-right: 30rpx;
			font-size: 30rpx;
			color: rgb(148, 102, 102);
		}
	}

	.payorder {
		float: left;
		width: 370rpx;
		height: 70rpx;
		background-color: rgb(148, 102, 102);
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-top: 280rpx;
		margin-left: 190rpx;
		text-align: center;
		color: white;
	}

	.address {
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;
		margin-bottom: 5rpx;

		.address1 {
			width: 30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: rgb(148, 102, 102);

			text {
				margin-left: 25rpx;
			}
		}

		.address2 {
			width: 40%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			color: rgb(148, 102, 102);
		}

		.address3 {
			width: 30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;

			text {
				margin-left: 160rpx;
				color: rgb(148, 102, 102);
			}
		}
	}

	.addressDetail {
		width: 100%;
		height: 180rpx;
		float: left;
		background-color: white;
		margin-bottom: 10rpx;

		.name {
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;

			text {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: rgb(148, 102, 102);
			}
		}

		.tel {
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;

			text {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: rgb(148, 102, 102);
			}
		}

		.address {
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;

			text {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: rgb(148, 102, 102);
			}

			overflow: hidden;
		}
	}
</style>
